<template>
    <div>
        <h1>评论</h1>
        <textarea name="" id="" cols="30" rows="10" v-model="msg">
        </textarea>
        <div>
            <button @click="sendMsg()">发表评论</button>
        </div>
        <div v-for="item in feedList" :key="item.id">
            <p>{{item.name }}</p>
            <p>{{ item.msg }}</p>
            <hr/>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    methods:{
        /**
         * 发表评论
         */
        sendMsg(){
            axios.post(
                "http://dida100.com:8888/api/feed", //请求的地址
                {msg:this.msg},//请求的数据
                {headers:{"Authorization":"Bearer "+localStorage.getItem("token")}} //请求头
                )
            .then(res=>{
                if(res.data.code===0){
                    this.msg = "";//清空msg
                    this.getFeed();//再一次获取新的评论
                }
            })
            .catch(err=>{
                console.log(err,"错误")
            })
        },
        /**
         * 获取评论
         */
        getFeed(){
            /*
            axios({
                url:"http://dida100.com:8888/api/feed",
                method:"GET",
                params:this.params,//get请求的参数
                headers:{
                    "Content-Type":"application/x-www-form-urlencoded",
                    "Authorization":"Bearer "+localStorage.getItem("token") //获取后端数据的凭证
                }
            })
            axios.get("http://dida100.com:8888/api/feed",{
                params:this.params,
                headers:{
                    // get默认请求类型content-Type就是urlencoded可以默认省略
                    "Authorization":"Bearer "+localStorage.getItem("token")
                }
            })*/
            // 使用url拼接的方式把get请求的参数通过?查询参数方式拼接起来
            axios.get("http://dida100.com:8888/api/feed?size="+this.params.size+"&current="+this.params.current,{
                headers:{ "Authorization":"Bearer "+localStorage.getItem("token")} 
            })
            .then(res=>{
                // 成功输出评论与分页信息
                if(res.data.code===0){
                    console.log("成功",res.data.data,res.data.pagnation)
                    // 更新评论列表
                    this.feedList = res.data.data;
                    // 更新分页信息
                    this.pagnation = res.data.pagnation;
                }else{
                // 失败输出失败
                    console.log("失败")
                }

            })
            .catch(err=>console.error(err,"网络错误"))
        }
    },
    created(){
        // 创建完毕获取评论
        this.getFeed();
    },
    data(){
        return {
            params:{  //请求的参数
                size:10, //每页多少条数据
                current:1 //当前取第几页
            },
            feedList:[],//评论列表
            pagnation:{},//分页信息
            msg:"",//要发表的评论
        }
    }
}
</script>